import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { NavBar, List, Picker, Input, Button, Toast, TextArea } from 'antd-mobile';
import { BillOutline, PhoneFill, FileOutline } from 'antd-mobile-icons';

const reasonColumns = [
  [
    { label: '交易非本人支付', value: '1' },
    { label: '商品与描述不符', value: '2' },
    { label: '不满意商家服务', value: '3' },
    { label: '交易被骗', value: '4' },
    { label: '其他原因', value: '5' },
  ],
];

const RefundPage = () => {
  const navigate = useNavigate();
  const [reasonVisible, setReasonVisible] = useState(false);
  const [reasonValue, setReasonValue] = useState([]);

  const handleSubmit = () => {
    // 在这里处理提交逻辑
    Toast.show({ icon: 'success', content: '申请已提交' });
    setTimeout(() => navigate(-1), 1500);
  };

  return (
    <div style={{ backgroundColor: '#f7f8fa', height: '100vh', display: 'flex', flexDirection: 'column' }}>
      <NavBar onBack={() => navigate(-1)} style={{'--border-bottom': '1px solid #eee'}}>申请退款</NavBar>
      
      <div style={{ flex: 1, overflowY: 'auto', padding: '12px' }}>
        <List header="退款信息" style={{'--border-radius': '8px', '--border-inner': 'none', marginBottom: '12px'}}>
          <List.Item 
            prefix={<BillOutline />} 
            extra={reasonValue.length > 0 ? reasonColumns[0].find(c => c.value === reasonValue[0])?.label : '请选择退款理由'}
            onClick={() => setReasonVisible(true)}
          >
            退款理由
          </List.Item>
          <Picker
            columns={reasonColumns}
            visible={reasonVisible}
            onClose={() => setReasonVisible(false)}
            value={reasonValue}
            onConfirm={v => setReasonValue(v)}
            title="请选择退款理由"
          />
        </List>

        <List header="" style={{'--border-radius': '8px', '--border-inner': 'none', marginBottom: '12px'}}>
          <List.Item prefix={<FileOutline />}>
            投诉理由
          </List.Item>
          <List.Item>
            <TextArea 
              placeholder="请详细描述您遇到的问题" 
              rows={4} 
              style={{ 
                '--border': '1px solid #f0f0f0',
                '--border-radius': '4px',
                padding: '8px'
              }}
            />
          </List.Item>
        </List>

        <List header="联系方式" style={{'--border-radius': '8px', '--border-inner': 'none', marginBottom: '12px'}}>
          <List.Item prefix={<PhoneFill />}>
            <Input placeholder="请输入您的手机号码" type="number" />
          </List.Item>
        </List>

        <div style={{ backgroundColor: '#fff', borderRadius: '8px', padding: '12px', color: '#888', fontSize: '14px' }}>
          <div style={{ color: '#333', fontWeight: 500, marginBottom: '8px' }}>温馨提示</div>
          <p style={{margin: '4px 0'}}>1. 提交申请后，客服将在1-3个工作日内处理</p>
          <p style={{margin: '4px 0'}}>2. 请确保填写的信心真实有效</p>
          <p style={{margin: '4px 0'}}>3. 如有疑问，请联系客服：400-670-0700</p>
        </div>
      </div>

      <div style={{ padding: '12px', backgroundColor: '#f7f8fa' }}>
        <Button block color="success" size="large" onClick={handleSubmit} style={{'--border-radius': '8px'}}>
          提交申请
        </Button>
      </div>
    </div>
  );
};

export default RefundPage;
